<template>
    <div id="login">
        <div class="home">
            <img src="../assets/image/login-logo.png">
            <div>Welcome Manager Center</div>
        </div>
        <div class="container">
            <el-form ref="form" :model="form">
                <el-form-item class="title">
                    欢迎进入管理平台
                </el-form-item>
                <el-form-item prop="username">
                    <el-input ref="username" v-model="form.username" placeholder="请输入账号" prefix-icon="el-icon-user">
                    </el-input>
                </el-form-item>

                
                <el-form-item prop="password">
                    <el-input ref="password" v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-lock"
                        show-password>
                    </el-input>
                </el-form-item>


                <el-form-item prop="captcha">
                    <el-input ref="captcha" v-model="form.captcha" placeholder="请输入验证码" prefix-icon="el-icon-aim"
                        @keyup.enter="login">
                    </el-input>
                    <el-image class="captcha" :src="captcha" fit="cover" @click="captchaChange"></el-image>
                </el-form-item>

                <el-form-item class="t-r">
                    <el-button type="success" @click="login" size="medium">立即登录</el-button>

                </el-form-item>
            
            </el-form>
        </div>
    </div>
</template>

<script>
    import {
        post
    } from '@/network/request'
    import {
        __URL__
    } from '@/main'

    export default {
        name: 'Login',
        data() {
            return {
                captcha: __URL__ + '/captcha?random=' + Math.random(), // 验证码地址
                form: {
                    username: '',
                    password: '',
                    captcha: ''
                }
            }
        },
        methods: {
            // 更换验证码
            captchaChange() {
                this.captcha = __URL__ + '/captcha?random=' + Math.random()
            },
            // 登录
            login() {
                if (this.form.username == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入管理员账号',
                        offset: 70
                    })
                    this.$refs['username'].focus()
                    return false
                }
                if (this.form.password == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入管理员密码',
                        offset: 70
                    })
                    this.$refs['password'].focus()
                    return false
                }

                post('/login', this.form).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        sessionStorage.setItem('token', result.data.token)
                        sessionStorage.setItem('cid', result.data.cid)
                        sessionStorage.setItem('nickname', result.data.nickname)
                        sessionStorage.setItem('main', result.data.main)
                        this.$router.push('/home')
                    } else {
                        this.captcha = __URL__ + '/captcha?random=' + Math.random()
                        this.form.captcha = ''

                        this.$notify.error({
                            title: '系统提示',
                            message: result.message,
                            offset: 70
                        })
                    }
                }).catch()
            }
        }
    }
</script>

<style>
</style>